<template>
	<div class="zyxq">
		 <el-button type="primary" size="small" class="btn" style="margin-left: 0;"  @click="cancel" >返回</el-button>
		  <el-button type="primary" size="small" class=" btn1"  @click="search()" icon="el-icon-search">全部</el-button>
		  <el-button type="primary" size="small" class="btn2"  @click="search(1)"  >跟读</el-button>
		  <el-button type="primary" size="small" class="btn3"  @click="search(2)" >朗读</el-button>
		  <el-button type="primary" size="small" class="btn4"  @click="search(3)" >背诵</el-button>

        <!-- <el-button type="danger" class="btn" :disabled="multipleDeleteDisabled" icon="delete" @click="componentsShow('multipleDelete','')">批量删除</el-button> -->
        <div class="search">

            <!--<div class="search-item">
                <span>学生名称：</span>
                <el-input placeholder="请输入老师名称" class="code-search" v-model="vkeyword"  @keyup.enter.native="search"></el-input>
            </div>-->
           </div>
      <!--  <i class="el-icon-close close" @click="cancel"></i>-->
        <Info1Component v-if="portComponents.info1.toggle"  @close="componentsHide" :params="portComponents.info1.params"></Info1Component>
    	 
        <InfoComponent v-if="portComponents.info.toggle"  @close="componentsHide" :params="portComponents.info.params"></InfoComponent>
        
        <AddComponent v-if="portComponents.add.toggle"  @close="componentsHide"  :params="portComponents.add.params"></AddComponent>

        <ChangeComponent v-if="portComponents.change.toggle"  @close="componentsHide"  :params="portComponents.change.params" :className="params.row.mc"></ChangeComponent>

        <!-- 单独删除组件 -->
        <!-- <DelComponent v-if="portComponents.singleDelete.toggle"  @close="componentsHide"  :data="portComponents.singleDelete.data"></DelComponent> -->
        <DelComponent v-if="portComponents.singleDelete.toggle"  @close="componentsHide" :params="portComponents.singleDelete.params"></DelComponent>

        <!-- 批量删除组件 -->
        <!-- <DelComponent v-if="portComponents.multipleDelete.toggle"  @close="componentsHide"  :data="portComponents.multipleDelete.data"></DelComponent> -->

        <!-- 表格区域 -->
		<el-table
	        :data="dataList"
              stripe
             border
             size='small'
	        align="center"
	        class="table"
	        @select="checkSelect"
	        @select-all="checkall">
	        <div slot='empty'>
	            <img src="../../../../assets/img/empty.png" style="width:40px;vertical-align: middle;">
	            <span style="vertical-align: middle;">暂时还没有内容哦!</span>
	        </div>

	        <!-- <el-table-column type="selection" width="55"></el-table-column> -->

	        <el-table-column
	            :prop="v.prop"
	            :label="v.label"
	            v-for="(v,index) in portTitleList"
	            align="center"
	            show-overflow-tooltip
	            v-if="v.hide != 0"
	            :align="v.align || 'center'"
	            :fixed="v.fixed"
	            :formatter="v.formatter"
	            :class-name="v.columnStyle"
	            :width="v.width"
	            :min-width="v.minWidth || '150'"
	            :header-align="v.headerAlign || 'center'"
	            >
	            <template scope="scope">
	                <div slot="reference">
	                	<div v-if="scope.column.property == 'xsmc'" @click="componentsShow('info',scope)">
                        <img
                        :src="scope.row.xb == '男' ? $store.state.sexImg.boy : $store.state.sexImg.girl"
                        style="width:20px;vertical-align:middle;"
                        v-if="scope.column.property == 'xsmc'">
                        <span style="vertical-align:middle;">{{ scope.row[scope.column.property] }}</span>
                        </div>
                        <span style="vertical-align:middle;" v-else>{{ scope.row[scope.column.property] }}</span>
                    </div>
	            </template>
	        </el-table-column>

	        <el-table-column
                label="操作"
                width="120"
                align="center"
                fixed="right">
                <template scope="scope">
                	   <el-button size="mini" type="primary"
                	   	@click="componentsShow('info1',scope)">音频详情</el-button>

                    <!--<el-button size="small" type="text" @click="componentsShow(v.type,scope)" v-for="v in portBntList">{{v.name}}</el-button>-->
                </template>
            </el-table-column>
	    </el-table>

		<!-- 分页查询区域 -->
       <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="pageindex"
            :page-sizes="pagesizes"
            :page-size="pagesize"
            :layout="layout"
            :total="total"
            class="class-page">
        </el-pagination>
	</div>
</template>

<script type="text/javascript">
	import qs from 'qs'
    import AddComponent from './add'
    import Info1Component from './info1'
    import InfoComponent from 'view/educa/classManage/student/info'
    import ChangeComponent from './change'
    import DelComponent from './del'
	export default {
		props: ['params'],
        components: {
            AddComponent,
            InfoComponent,
            ChangeComponent,
            DelComponent,
            Info1Component
        },
		data () {
			return {
				vydlx:'1',
//				type:'1',
//              vkeyword:'',
                multipleDelNum:'', //获取批量选择的数据
                dataList: [],  //表格数据
                comboxlist:[], //下拉框 动态的
                vcomautovalue:'',//下拉框name 动态的
                vcomgdvalue:'',//下拉框name 固定的

				/*动画加载*/
                isLoading: true,//动画加载
                searchLoading: false,//搜索按钮触发按钮动画
                /*分页属性设置*/
                layout: 'total, sizes, prev, pager, next, jumper',//组件布局
			    pageindex: this.$store.state.pageindex,//当前分页页码
                pagesizes: this.$store.state.pagesizes,//显示个数的选择器选项
                pagesize: this.$store.state.pagesize,//每页显示条目数
                total: 0,//总条数
				portTitleList: [
					{
                        prop:'id',
                        label:'id',
                        hide:0,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'120',
                        headerAlign:'center'
                    },
                    {
                        prop:'xsmc',
                        label:'学生姓名',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'90',
                        headerAlign:'center'
                    },
                    {
                        prop:'dymc',
                        label:'单元',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'65',
                        headerAlign:'center'
                    },
                    {
                        prop:'wb',
                        label:'文本',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'150',
                        headerAlign:'center'
                    },
                    {
                        prop:'stid',
                        label:'试题',
                        hide:0,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'100',
                        headerAlign:'center'
                    },
                    {
                        prop:'ydlx',
                        label:'听说类型',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'90',
                        headerAlign:'center'
                    },{
                        prop:'ypdz',
                        label:'学生发音音频地址',
                        hide:0,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'130',
                        headerAlign:'center'
                    },
                     {
                        prop:'fs',
                        label:'分数',
                        hide:1,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'70',
                        headerAlign:'center'
                    },
                     {
                        prop:'xs',
                        label:'星数',
                        hide:0,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'65',
                        headerAlign:'center'
                    },
                     {
                        prop:'sj',
                        label:'时间',
                        hide:0,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'120',
                        headerAlign:'center'
                    },
                     {
                        prop:'fydf',
                        label:'发音得分',
                        hide:0,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'90',
                        headerAlign:'center'
                    },
                     {
                        prop:'lld',
                        label:'流利度',
                        hide:0,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'75',
                        headerAlign:'center'
                    },
                     {
                        prop:'wzd',
                        label:'完整度',
                        hide:0,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'75',
                        headerAlign:'center'
                    },
                     {
                        prop:'cwdc',
                        label:'错误单词',
                        hide:0,
                        align:'center',
                        fixed:false,
                        width:'',
                        minWidth:'120',
                        headerAlign:'center'
                    },
				],

                 /*组件区域*/
                portComponents: {
                    singleDelete: {
                        type: 'singleDelete',
                        toggle: false,
                        params: '',
                        data: {
                            index: '',
                            type: 'single',
                            title: '此操作将删除该班级, 是否继续?'
                        }
                    },
                    multipleDelete: {
                        type: 'multipleDelete',
                        toggle: false,
                        params: '',
                        data: {
                            index: '',
                            type: 'multiple',
                            title: '此操作将删除您选中的班级, 是否继续?'
                        }
                    },
                    add: {
                        type: 'add',
                        toggle: false,
                        params: '',
                        data: {}
                    },
                    info1: {
                        type: 'info1',
                        toggle: false,
                        params: '',
                        data: {}
                    },
                    change: {
                        type: 'change',
                        toggle: false,
                        params: '',
                        data: {}
                    },
                    info: {
                        type: 'info',
                        toggle: false,
                        params: '',
                        data: {}
                    }
                },

			}
		},
		created () {
			this.$store.dispatch('changeTitle','作业详情管理');//修改title
			   this.$store.dispatch('changeRouterIndex','/educa/tingshuozy');//修改路由
			this.search()
		},
		methods: {

//			tableRowClassName(row, index) {//隔行变色颜色设置
//              // console.log(row)
//              if ( index%4 == 0) {
//                   return "table-cell-red";
//              }else if( index%4 == 1 ){
//                  return "table-cell-yellow";
//              }else if( index%4 == 2 ){
//                  return "table-cell-green";
//              }else{
//                  return "table-cell-blue"
//              }
//          },
			search (ydlx) {
				var logininfo = JSON.parse(localStorage.logininfo);
              this.searchLoading = true;
             var params2 = qs.stringify({
                      dyid:this.params.row.dyid+'',
					  xsid: this.params.row.xsid+'',
					  ydlx:ydlx,
					  keyword:this.vkeyword,
                      yhid:logininfo.id+'',
                      pageindex: this.pageindex+'',
                      pagesize: this.pagesize+''
               })
             //执行
                 this.axios.post(this.$store.state.api + 'xsstzy/list',  params2 )
                 .then(res => {
					if (res.data.code == 1) {
						this.dataList = res.data.data.list;
						this.total = res.data.data.totalPage;
						this.$store.state.loading = false;
					}else{
						this.$store.warning(res.data.msg)
						this.$store.state.loading = false;
					}
                 })
			},

			cancel () {
				this.$emit('close',{type:'zyxq',cancel:true})
			},

			handleSizeChange (val) {//每页显示条数触发事件
                this.pagesize = val;
                this.pageindex = 1;
                this.search();
            },

            handleCurrentChange (val) {//分页触发事件
                this.search();
            },
            checkSelect (selection, row) {//点击单选select触发事件
                let strID = [];
                selection.forEach(function(v,i){
                    strID.push(v.id)
                })
                this.multipleDelNum = strID.join(",");
            },
            checkall (selection) {//点击全选select触发事件
                let strID = [];

                selection.forEach(function(v,i){
                    strID.push(v.id)
                })
                this.multipleDelNum = strID.join(",");
            },


            /* 组件的弹框  */
            componentsShow (type,data) { //显示组件
                for ( let i in this.portComponents ) {
                    if (type == this.portComponents[i].type) {

                        this.portComponents[i].toggle = true;
                        this.portComponents[i].params = data;

                        if (this.portComponents[i].data.type == 'single') {
                            this.portComponents[i].data.index = data.row.id

                        }else if(this.portComponents[i].data.type == 'multiple'){
                            this.portComponents[i].data.index = this.multipleDelNum;

                        }else if(this.portComponents[i].type == 'test'){
                            this.portComponents[i].data.distinction  = "test";

                        }else if(this.portComponents[i].type == 'score'){
                            this.portComponents[i].data.distinction  = "score";

                        }else{
                            return;
                        }
                        return;
                    }
                }

            },
            componentsHide (setting) { //关闭组件
                for ( let i in this.portComponents ) {
                    if (setting.type == this.portComponents[i].type) {
                        this.portComponents[i].toggle = false;

                        if (!setting.cancel) {
                           this.search();
                        }
                        return;
                    }
                }
            }


		},
		computed: {
			multipleDeleteDisabled () {
                console.log(this.multipleDelNum)
                if (this.multipleDelNum) {
                    return false;
                }else{
                    return true
                }
            }
		}
	}
</script>

<style lang="less" scope>

	.zyxq {
		position: absolute;
		top:100px;left:20px;
		width: 97%;
		height: 100%;
		background: #E8EDF0;
		/*z-index: 99;*/
	}
	h2 {
		line-height: 40px;
	}
	.code-search {
            width: 200px;
            height: 30px;
            margin:10px 0 10px 0;
        }

	.table {
		margin-top:10px;
		width: 97%;
	}

	.btn1 {
		text-align: center;

	}
	.btn2 {
		text-align: center;
		margin-left: 10px;
		 margin-top: 10px;
	}
	.btn3 {
		text-align: center;
		margin-left: 10px;
		 margin-top: 10px;
	}
	.btn4 {
		text-align: center;
		margin-left: 10px;
		 margin-top: 10px;
	}
	.btn {
		text-align: center;
		margin-left: 10px;
		 margin-top: 10px;
	}
    .search-item {
            display: inline-block;
            margin-left:10px;
        }
	.submit {
		width: 120px;
	}

</style>
